<template>
           <div class="box" >
                   <h2>签到
                       <div class="dis"  @click="dis_">X</div>
                   </h2>
              <div class="content">
                  <div class="c_head">
                      <p>签到越多,奖励积分越高</p>
                      <p>已获得{{integralSum === '' ? 0 : integralSum}}积分</p>
                  </div>
                     <ul>
                         <li v-for="(item,index) in arr"
                         :style="{'background': item.statue ? 'rgb(224,255,248)' : 'rgba(254,249,237)',
                         'color' : item.statue ? 'rgb(70,241,11)' : 'rgb(238,159,6)'}">
                             {{item.time=== "" ? "" : dayjs(item.time).format('MM-DD') }}
                             <p>{{item.statue ? '已签到' : item.score+'积分'}}</p>
                             <div>
                                 <img v-if="item.statue " src="/img/common/ys.png" alt="" >
                                 <img v-else src="/img/common/jifen.png" alt="" >
                             </div>
                         </li>
                     </ul>

              </div>
              <button @click="signIn" :disabled="btnDisabled">{{signIn_info}}</button>
              <p class="footer">本星期已累计签到{{dayLength}}天</p>
           </div>
</template>

<script>
import api from "@/api";
import dayjs from "dayjs";

export default {
    name: "SignIn",
    data(){
        return{
            cards:true,
            user:{
                uid:"",
                integral:"",
                seconds:"",
                dateTime:"",
            },
            integralSum:0,
            signIn_info:"签到",
            btnDisabled:false,
            arr:[{
                time:"",
                score:10,
                statue:false,
                },
                {
                    time:"",
                    score:10,
                    statue:false,
                },
                {
                    time:"",
                    score:10,
                    statue:false,
                },
                {
                    time:"",
                    score:10,
                    statue:false,
                },
                {
                    time:"",
                    score:10,
                    statue:false,
                },
                {
                    time:"",
                    score:20,
                    statue:false,
                },
                {
                    time:"",
                    score:50,
                    statue:false,
                },],
            dayLength:"",
        }
    },
    mounted() {
        if(window.localStorage.getItem("user") == null){
            this.integralSum = 0;
        }

        api.integralAdd().then((res)=>{
            this.integralSum = res.data.data;
        })


        let date = new Date();
        let now = date.getDay();
        let signIn=["","","","","","","",""];
        let w = [dayjs().format('YYYY-MM-DD')];
        if(now ===1){
           for(let i =1;i<7;i++){
               let time = dayjs().add(i, 'day').format('YYYY-MM-DD')
               w.push(time)
           }
        }else if(now ===0){
            for(let i =1;i<7;i++){
                let time = dayjs().subtract(i, 'day').format('YYYY-MM-DD')
                w.unshift(time)
            }
        }else{
            for(let i = 1;i<=now-1;i++){
                let time = dayjs().subtract(i, 'day').format('YYYY-MM-DD')
                w.unshift(time)
            }
            for(let i = 1;i<=7-now;i++){
                let time = dayjs().add(i, 'day').format('YYYY-MM-DD')
                w.push(time)
            }
        }
       let user_ = JSON.parse(window.localStorage.getItem("user"))
        if(user_ != null){
            this.user.uid = user_.uid
            api.signInGetAll(1).then((res)=>{
                this.dayLength = res.data.data.length;
                for(let i =0;i< res.data.data.length;i++){
                    if(1 === new Date(res.data.data[i].dateTime).getDay()){
                        signIn.push(dayjs(res.data.data[i].dateTime).format('YYYY-MM-DD'))
                        return;
                    }
                    signIn.push(dayjs(res.data.data[i].dateTime).format('YYYY-MM-DD'))
                }

            })

            setTimeout(()=>{
                if(signIn.length>0){
                    for(let i=0;i<signIn.length;i++){
                        if(signIn[i] === dayjs().format('YYYY-MM-DD')){
                            this.signIn_info = "已签到"
                            this.btnDisabled = true;
                        }
                        for(let j=0;j<w.length;j++){
                            if(signIn[i] === w[j]){
                                this.arr[j].statue = true;
                            }
                        }
                    }
                }
                    for(let j=0;j<w.length;j++){
                        this.arr[j].time = w[j];
                }

            },500)

        }
    },
    methods:{
        dayjs,
        dis_(){
            this.$store.commit("signIn_",false);
        },
        signIn(){
            if(window.localStorage.getItem("user") == null){
                this.$router.push("/login")
                this.$store.commit("signIn_",false);
            }

            if(this.user.uid === ""){
                return 0
            }
            let date = new Date();
            let time = dayjs().add(1, 'day').format('YYYY-MM-DD 00:00:00')
            let now = dayjs().format('YYYY-MM-DD HH:mm:ss');
            const date1 = dayjs(time)
            const date2 = dayjs(now)
            this.user.seconds =date1.diff(date2)/1000;
            this.user.dateTime = now;
            let number = date.getDay();
            if(number===0){
                number = 6;
            }else {
                number -= 1;
            }
            this.user.integral = this.arr[number].score
            api.signInInsert(this.user).then((res)=>{
                if(res.data.code === 200){
                    this.signIn_info = "已签到"
                    this.arr[number].statue = true
                    this.btnDisabled = true;
                    this.dayLength+=1;
                    this.integralSum+=this.user.integral;
                }else {
                    alert("网络状态异常，签到失败")
                }
            })

        }
    }
}
</script>

<style scoped>
.box{
    box-sizing: border-box;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translatex(-50%);
    width: 350px;
    border-radius: 10px;
    border: 10px solid rgba(110, 110, 105, 0.1);
    z-index: 999;
    display: flex;
    background: rgba(103, 102, 102, 0.9);
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    animation:box_es .5s ease-in-out 0s 1 forwards ;
}
@keyframes box_es {
    0%{
        transform: scale(0) translateY(-50%) translatex(-50%);
    }
    80%{
        transform: scale(1.05) translateY(-50%) translatex(-50%);
    }
    100%{
        transform: scale(1) translateY(-50%) translatex(-50%);
    }
}
h2{
    position: relative;
    width: 100%;
    height: 40px;
    line-height: 40px;
    color: #f9faf9;
    border-bottom: 1px solid #fdfffd;
    padding-left: 5px;
    font-weight: bolder;
}
.content{
    width: 100%;
}
.c_head{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    padding: 5px;
    color: white;
    margin-bottom: 10px;
}

ul{
    width: 100%;
    list-style: none;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    /*display: flex;*/
}
li{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    font-size: 0.8rem;
    min-font-size: 15px;
    width: 70px;
    height: 100px;
    margin-bottom: 10px;
    color: rgb(229, 184, 78);
    box-shadow: 0 0 6px 1px #97989b;
}
button{
    width: 200px;
    height: 45px;
    border-radius: 25px;
    background: #d7779b;
    border: 0;
    color: white;
    margin: 8px 0;
    font-weight: bolder;
    cursor: pointer;
}
button:hover{
    opacity: .7;
}
.footer{
    width: 100%;
    font-size: 14px;
    color: #f5fac9;
    padding-left: 5px;
    padding-bottom: 5px;
    font-weight: bolder;
}
.dis{
    position: absolute;
    right: -2%;
    top: -10%;
    width: 20px;
    height: 20px;
    display: flex;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-size: 13px;
    color: white;
    background: #e1b57c;
}
.dis:hover{
    opacity: .7;
}
.statue{
    width: 30px;
    height: 30px;
    background: #68c070;
}
</style>